﻿@model ViewModel_ShareRole

<div class="container mt-5">
    <h2 class="text-center text-primary mb-4">角色权限管理</h2>

    <table class="table table-bordered table-striped">
        <thead class="bg-primary text-white">
            <tr>
                <th>角色名</th>
                <th>权限名</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.rolePowers)
            {
                <tr>
                    <td>@item.role_name</td>
                    <td>@item.permission_name</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-danger btn-sm" data-role-id="@item.role_id" data-permission-id="@item.permission_id" onclick="deleteRolePermission(this)">删除</button>
                    </td>

                </tr>
            }
        </tbody>
    </table>

    <div class="text-center mt-4">
        <!-- 将按钮置于表格下方并居中 -->
        <button type="button" class="btn btn-primary mb-2" data-toggle="modal" data-target="#addPermissionModal">添加角色权限</button>
    </div>

    <!-- 添加角色权限的模态窗口 -->
    <div class="modal fade" id="addPermissionModal" tabindex="-1" aria-labelledby="addPermissionModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addPermissionModalLabel">添加角色权限</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form asp-controller="UserAndRole" asp-action="AddUserRoleSumbit"> 
                        <div class="form-group">
                            <label for="roleSelect">选择角色</label>
                            <select class="form-control" id="roleSelect" name="role_id">
                                <option value="1">教师</option>
                                <option value="2">系主任</option>
                                <option value="3">学院主任</option>
                             </select>
                        </div>
                        <div class="form-group">
                            <label for="permissionSelect">选择权限</label>
                            <select class="form-control" id="permissionSelect" name="permission_id">
                                 @foreach (var s in Model.permissions)
                                {
                                    <option value="@s.permission_id">@s.permission_name</option>
                                } 
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary">保存</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function deleteRolePermission(buttonElement) {
        var roleId = buttonElement.getAttribute('data-role-id');
        var permissionId = buttonElement.getAttribute('data-permission-id');

        if (confirm('您确定要删除这个角色权限关联吗？')) {
            // 使用 jQuery 发送 POST 请求到后端
            $.post('/UserAndRole/DeleteRolePermission', { role_id: roleId, permission_id: permissionId }, function (response) {
                if (response.success) {
                    // 如果删除成功，从表格中移除这一行
                    $(buttonElement).closest('tr').remove();
                } else {
                    alert('删除失败: ' + response.message);
                }
            });
        }
    }
</script>

